<template>
	<view class="h-screen flex flex-col bg-contain bg-no-repeat relative"
		:style="{backgroundImage:`url(${config[sex].bg})`}">
		<NavBarVue title="测试结果"></NavBarVue>
		<view class="flex-1 overflow-hidden">
			<view class="px-30">
				<view class="flex flex-col bg-contain bg-no-repeat pt-130"
					:style="{backgroundImage:`url(${config[sex].boxBg})`}">
					<text class="font-bold text-md ml-30">{{title}}</text>
					<view class="p-30 border-[#FFCE99] border-solid relative border-2 bg-white rounded-lg border-t-0">
						<text class="text-sm font-bold">{{data.name}}</text>
						<view class="w-full border-2 my-20 border-solid border-white rounded-full overflow-hidden bg-[#EEF1F6]">
							<view class="bg-gradient-to-r h-20 rounded-r-full"
								:style="{width:`${data.memberSheet.score}%`,'--tw-gradient-stops':`#FFA4A4,#FF6161`}">
							</view>
						</view>
						<view class="flex mb-30">
							<text class="text-sm">总占比约为</text>
							<text class="text-[#EA4949] text-sm font-bold">{{data.memberSheet.score}}%</text>
						</view>
						<view class="box-results rounded-lg p-20 bg-[#EBF5FB]">
							<text>{{data.sool}}</text>
						</view>
						<!-- 锁 -->
						<view class="absolute w-full h-full flex justify-end items-end ground_glass top-0 left-0" v-if="lockShow"
							@click="getResult">
							<view class="box-lock flex justify-center items-center rounded-full">
								<ImageBoxVue src="/static/icons/lock.png" width="50rpx" height="50rpx"></ImageBoxVue>
								<text class="ml-20">解锁全测试结果</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="px-20 w-full">
			<view class="btn-next rounded-full flex justify-center" @click="onStep">
				<text class="text-white">其他测试</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"
	import testApi from '@/apis/apiList/testApi';
	const lockShow = ref(true)
	const id = ref()
	const title = ref("")
	const data = ref({})
	onLoad((option) => {
		sex.value = uni.getStorageSync('user').gender
		id.value = option.id
		title.value = option.title
	})
	onShow(() => {
		memberSheetInterpret()
	})
	// 付款
	const getResult = () => {
		testApi.memberSheetPayPaper({
			id: id.value,
			paysts: 0
		}).then(res => {
			memberSheetInterpret()
		}).catch(err => {
			memberSheetInterpret()
		})
	}
	// 解答
	const memberSheetInterpret = () => {
		testApi.memberSheetInterpret({
			id: id.value
		}).then(res => {
			data.value = res.data
			// lockShow.value = res.data.memberSheet.pay == 0 ? false : true
		})
	}
	const config = [{
		bg: "/static/test/woman_bg.png",
		boxBg: "/static/test/woman_box_bg.png",

	}, {
		bg: "/static/test/bg.png",
		boxBg: "/static/test/man_box_bg.png",
	}]
	const sex = ref(0)
	const back = () => {
		uni.navigateBack({
			delta: 1
		})
	}
</script>

<style lang="less">
	// .ground_glass {
	// 	background: rgba(255, 255, 255, 0.2);
	// 	/* 半透明背景 */
	// 	backdrop-filter: blur(8px);
	// 	/* 模糊效果 */
	// }
	.ground_glass {
		background: url(/static/test/bg_lock.png) no-repeat;
		background-size: cover;
		height: 434rpx;
		top: 26rpx;
		left: -30rpx;
		padding-right: 32rpx;
		padding-bottom: 66rpx;

		.box-lock {
			width: 342rpx;
			height: 82rpx;
			border-radius: 120rpx;
			border: 2rpx solid #303F4E;

			text {
				font-weight: 400;
				font-size: 30rpx;
				color: #303F4E;
				line-height: 45rpx;
			}
		}
	}

	.box-results {
		height: 252rpx;
	}

	.btn-next {
		background: url(/static/test/bg_btn_blue.png) no-repeat;
		background-size: cover;
		height: 104rpx;

		text {
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 40rpx;
			margin-top: 24rpx;
		}
	}
</style>